<rd-header>
  <rd-header-title title-text="Edge Devices">
    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.devices" ui-sref-opts="{reload: true}">
      <i class="fa fa-sync" aria-hidden="true"></i>
    </a>
  </rd-header-title>
  <rd-header-content>Edge Devices</rd-header-content>
</rd-header>

<div
  class="row"
  style="width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center"
  ng-if="$ctrl.loadingMessage"
>
  <div class="sk-fold">
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
    <div class="sk-fold-cube"></div>
  </div>
  <span style="margin-top: 25px">
    {{ $ctrl.loadingMessage }}
    <i class="fa fa-cog fa-spin"></i>
  </span>
</div>

<div class="row" ng-if="!$ctrl.loadingMessage">
  <div class="col-sm-12">
    <edge-devices-datatable
      dataset="($ctrl.edgeDevices)"
      is-fdo-enabled="($ctrl.isFDOEnabled)"
      is-open-amt-enabled="($ctrl.isOpenAMTEnabled)"
      disable-trust-on-first-connect="($ctrl.disableTrustOnFirstConnect)"
      mps-server="($ctrl.mpsServer)"
      on-refresh="($ctrl.getEnvironments)"
      set-loading-message="($ctrl.setLoadingMessage)"
    ></edge-devices-datatable>
  </div>
</div>
